<template>
  <el-container>
    <el-main>
      <div class="default-main ba-table-box">
        <TableHeader
          :buttons="[
            'refresh',
            'add',
            'edit',
            'remove',
            'comSearch',
            'columnDisplay',
          ]"
          :quick-search-placeholder="placeholder"
          @action="baTable.onTableHeaderAction"
        />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" @action="baTable.onTableAction" />
        <!-- 表单 -->
        <PopupForm ref="formRef" v-if="baTable.form.operate" />
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import { AccessPointM } from "@/api/backend/index";
import PopupForm from "./popupForm.vue";
import { useRoute, useRouter } from "vue-router";
import { useAccessPoint } from "@/store/backend/AccessPointM/accessPoint";
import { useNavTabs } from "@/store/navTabs";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const router = useRouter();
const accessPointer = useAccessPoint();
const navTabs = useNavTabs();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + AccessPointM)
      ? (navTabs as any).pageSizeMap.get(route.path + AccessPointM)
      : 10;
  }
  return 10;
};

//全局事件总线
const { proxy } = useCurrentInstance();
const baTable = new baTableClass(
  new baTableApi(AccessPointM), //this.api = api菜单管理相关
  {
    pk: "id",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("code"),
        label: "编号",
        prop: "code",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("type"),
        label: "型号",
        prop: "type",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("cardNumber"),
        label: "流量卡号",
        prop: "cardNumber",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("mqttAddr"),
        label: "地址(mqtt)",
        prop: "mqttAddr",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("mqttPort"),
        label: "端口(mqtt)",
        prop: "mqttPort",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("mgttName"),
        label: "用户名",
        prop: "mgttName",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("mgttPassword"),
        label: "密码",
        prop: "mgttPassword",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("cmdName"),
        label: "命令队列名",
        prop: "cmdName",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("stateName"),
        label: "状态队列名",
        prop: "stateName",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("topic"),
        label: "数据队列名",
        prop: "topic",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: operatorShowOff([route.path + "/edit", route.path + "/remove"]),
        label: "操作",
        align: "center",
        width: "130",
        render: "buttons",
        fixed: "right",
        operator: false,
        buttons: [
          {
            render: "tipButton",
            name: "edit",
            title: "编辑",
            text: "",
            type: "primary",
            icon: "iconfont icon-pencil",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          // {
          //   render: "tipButton",
          //   name: "info",
          //   title: "详情",
          //   text: "",
          //   type: "primary",
          //   icon: "fa fa-search-plus",
          //   class: "table-row-edit",
          //   disabledTip: false,
          // },
          {
            render: "confirmButton",
            name: "remove",
            title: "删除",
            text: "",
            type: "danger",
            icon: "el-icon-DeleteFilled",
            class: "table-row-delete",
            popconfirm: {
              confirmButtonText: "删除",
              cancelButtonText: "取消",
              confirmButtonType: "danger",
              title: "确定删除所选项吗",
            },
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
      },
    ],
    filter: {
      pageSize: pageSizeKeep(),
    },
  }
);

type IOT = {
  bank: string | any;
  bankOne: string | any;
  cardNumber: string;
  cmdName: string;
  code: string;
  createBy: string | any;
  createTime: string;
  createUser: string | any;
  id: number;
  mgttName: string;
  mgttPassword: string;
  mqttAddr: string;
  mqttPort: string;
  params: any;
  remark: string | any;
  searchValue: string | any;
  stateName: string;
  topic: string;
  type: string;
  updateBy: string | any;
  updateTime: string;
  updateUser: string | any;
};
//跳转网关详情页 流量数据
const infoButtonClick = (name: string, row: IOT) => {
  console.log("row", row);
  accessPointer.$patch((state) => {
    state.single = row;
  });
  router.push({ path: "/admin/AccessPointM/iotDetail" });
};

onMounted(() => {
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(AccessPointM);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      //回滚功能暂无
      if (data.name == "rollback") {
        // onRollback([data.row[baTable.table.pk!]])
      } else if (data.name == "info") {
        //携带主键字段pk
        infoButtonClick(
          (data.row as TableRow)[baTable.table.pk!],
          data.row as any
        );
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0;
}
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}
</style>
